<template>
  <div class="container" style="">
    <div v-for="(item,index) in lists" :key="index" class="content">
      <!-- <ul class="date bor-b-e9e9e9">{{index}}:时间</ul> -->
      
      <ul class="details">
        <figure  class="flex_c_c_c img1">
      <img :src="item.url" alt="" style="width:100%;border-radius:40px;">
      </figure>

        <!-- <img :src="item.url" alt=""> -->
        <li class="details_right bor-b-e9e9e9">
          <div class="span1 ellipsis_3" v-if="item.sign=='copy'">
            {{item.name||'TA'}}
            <span class="c_e93636">第{{item.count}}次</span>{{item.copydata.val1}}
          </div>
          <div class="span1 ellipsis_3" v-if="item.sign=='view'">
           {{item.name||'TA'}}
            <span class="c_e93636">第{{item.count}}次</span>{{item.viewdata.val1}}
          </div>
          <div class="span1 ellipsis_3" v-if="item.sign=='praise'">
           {{item.name||'TA'}}
            <span class="c_e93636">第{{item.count}}次</span>{{item.signdata.val1}}
          </div>
          <span class="p_r_20">{{item.create_time}}</span>
        </li>
      </ul>
    </div>
    <!-- <span style="width:100vw;margin:100px 30vw;display:inline-block">空</span> -->
  </div>
</template>

<script>
export default {
  props: ["lists"],
  data() {
    return {};
  },
  created(){
    
  },
  mounted() {
    
    let height = this.height();
    window.onresize = function temp() {
      height.resize();
    };
   
    // let that = this;
    // let div = document.getElementsByClassName("container")[0];

    // div.addEventListener("scroll", function(e) {
    //   let height = div.clientHeight + div.scrollTop;
    //   if (height == div.scrollHeight) {
    //     // console.log('到底部了。。。')
    //     //   let aa = ['aa','bb','cc']
    //     //  aa.forEach(val=>{
    //     //    that.lists.push(val)
    //     //  })
    //   }
    //   //   setTimeout(function(){
    //   //     console.log('可见区域高',div.clientHeight)
    //   // console.log('正文全文高',div.scrollHeight)
    //   // console.log('被卷去的高',div.scrollTop)
    //   //   },500)
    // });
  },
  methods: {
    height() {
      let winHeight = window.screen.height - 280;
      let div = document.getElementsByClassName("container")[0];
      div.style.height = winHeight + "px";
    }
  }
};
</script>
<style scoped>
.c_e93636 {
  color: #e93636;
}
.span1 {
  flex: 1;
}
.p_r_20 {
  margin: 0 20px;
  color: #6b6b6b;
  width:160px;
  text-align: center;
}
.container {
  width: 100vw;
  height: 500px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.content {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  background: #fff;
}
.date {
  width: 100vw;
  height: 80px;
  line-height: 80px;
  padding-left: 50px;
  font-size: 30px;
}
.img1 {
  width: 84px;
  height: 84px;
  margin: 0 20px;
}
.details {
  width: 100vw;
  height: 140px;
  display: flex;
  align-items: center;
}
.details_right {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  height: 140px;
  font-size: 28px;
}
</style>
